import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:geomancy/styles/index.dart';

class CommonRoomPositionTipsWidget extends StatefulWidget {
  const CommonRoomPositionTipsWidget({super.key});

  @override
  State<CommonRoomPositionTipsWidget> createState() => _CommonRoomPositionTipsWidgetState();
}

class _CommonRoomPositionTipsWidgetState extends State<CommonRoomPositionTipsWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器
    _controller = AnimationController(
      duration: const Duration(seconds: 10), // 一次旋转的时间为10秒
      vsync: this,
    )..repeat(); // repeat()方法使动画无限循环
  }

  @override
  void dispose() {
    _controller.dispose(); // 释放控制器资源
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 510.w,
      height: 620.w,
      padding: EdgeInsets.only(top: 160.w),
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/icons/room_position_tips_bg.png'),
          fit: BoxFit.fitWidth,
          alignment: Alignment.bottomCenter
        )
      ),
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          Positioned(
            top: -160.w,
            left: 0,
            right: 0,
            child: Center(
              child: Container(
                width: 70.w,
                height: 40.w,
                alignment: Alignment.center,
                margin: EdgeInsets.only(bottom: 25.w),
                decoration: BoxDecoration(
                    color: ColorStyle.borderColor,
                    borderRadius: BorderRadius.all(Radius.circular(20.w))
                ),
                child: Text('室外', style: TextStyle(fontSize: 24.sp, height: 1.2, color: ColorStyle.themeLightColor)),
              ),
            ),
          ),
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              width: 70.w,
              height: 40.w,
              alignment: Alignment.center,
              margin: EdgeInsets.only(bottom: 25.w),
              decoration: BoxDecoration(
                  color: ColorStyle.borderColor,
                  borderRadius: BorderRadius.all(Radius.circular(20.w))
              ),
              child: Text('室内', style: TextStyle(fontSize: 24.sp, height: 1.2, color: ColorStyle.themeLightColor)),
            )
          ),
          Positioned(
            top: 70.w,
            left: 0,
            right: 0,
            child: RotationTransition(
              turns: _controller,
              child: Center(child: Image.asset('assets/icons/compass.png', width: 230.w)),
            ),
          ),
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: Align(child: Image.asset('assets/icons/position_people.png', width: 280.w)),
          )
        ],
      ),
    );
  }
}
